<template>
	<view class="index-container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="logo">
				<image src="../../static/images/logo2.svg" mode="true"></image>
			</view>
			<view class="search">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
			<text class="btn-login" @click="goToLogin">{{userInfo.nickName?userInfo.nickName:'登录'}}</text>
		</view>
		<!-- 导航区域 -->
		<scroll-view scroll-x="true" class="scroll-nav" enable-flex="true" v-if="indexData.kingKongModule">
			<view class="navitem" :class="{active:navIndex===-1}" @click="toggleNav(-1,0)">
				推荐
			</view>
			<view class="navitem navbar" :class="{active:navIndex===index}"
				v-for="(item,index) in indexData.kingKongModule.kingKongList" @click="toggleNav(index,item.L1Id)"
				:key="item.L1Id">
				{{item.text}}
			</view>
		</scroll-view>
		<!-- 内容区域 -->
		<!-- <view class="loading" v-if="">
			<image src="../../static/images/loading.gif" mode=""></image>
		</view> -->
		<scroll-view scroll-y="true" class="scroll-content" enable-flex="true">
			<recommend v-if="!navId"></recommend>
			<CateList v-else :navId="navId"></CateList>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import request from '../../utils/request.js'
	import Recommend from '../../components/Recommend/Recommend.vue'
	import CateList from '../../components/CateList/CateList.vue'
	export default {
		components: {
			Recommend,
			CateList
		},
		data() {
			return {
				// navBarList: [],
				navIndex: -1,
				navId: 0,
				userInfo: {},
			}
		},
		mounted() {
			this.getIndexDataAction();
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.userInfo = res.data;
				}
			})
		},
		computed: {
			...mapState({
				indexData: state => state.home.indexData,
			})
		},
		methods: {
			...mapActions([
				'getIndexDataAction',
			]),
			// 获取indexData数据
			// async getIndexData() {
			// 	let data = await request('/getIndexData'); // 小程序
			// 	// let data = await request('/api/getIndexData'); // H5
			// 	this.navBarList = data.kingKongModule.kingKongList
			// 	console.log(this.navBarList);
			// },
			// 切换导航选项卡
			toggleNav(index, navId) {
				this.navIndex = index;
				this.navId = navId;
			},
			goToLogin(){
				if(!this.userInfo.nickName)
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.index-container {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.logo {
				width: 200rpx;
				height: 80rpx;
				image{
					display: block;
					width: 100%;
					height: 100%;
					transform: scale(3.5);
				}
			}

			.search {
				flex: 1;
				position: relative;
				height: 30px;
				padding: 0px 28rpx;
				margin-right: 28rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;
				background-color: #eee;

				.icon-search {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
				}

				input {
					margin: 0 0 0 20px;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);

					placeholder {
						font-size: 26px;
					}
				}

			}

			.btn-login {
				padding: 2px;
				border-radius: 5px;
				border: 1px solid orangered;
				font-size: 13px;
				color: orangered;
			}
		}

		.scroll-nav {
			white-space: nowrap;
			font-size: 14px;

			.navitem {
				display: inline-block;
				margin: 0 20rpx;
				width: 100rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;

				&.navbar {
					margin: 0 30rpx;
					width: 140rpx;
				}

				&.active {
					color: #BB2C08;
					border-bottom: 1rpx solid #BB2C08;
				}
			}
		}
		.loading{
			margin:0 auto;
			width: 300rpx;
			height: 200rpx;
			
			image{
				display: block;
				width: 100%;
				height:100%;
				
			}
		}
	}
</style>
